<script setup>
import ModuleTitle from "../moduleTitle.vue";
import ModuleFirst from "../moduleFirst.vue";
import ModuleSecond from "../moduleSecond.vue";
import ModuleThird from "../moduleThird.vue";
import { nextTick, onMounted, onUnmounted, useTemplateRef } from "vue";

const screenRef = useTemplateRef("screenRef");
const getScale = (width = 1920, height = 1080) => {
  const ww = window.innerWidth / width;
  const wh = window.innerHeight / height;

  return {
    x: ww,
    y: wh,
  };
};

const handleResize = () => {
  screenRef.value.style.transform = `scale(${getScale().x}, ${getScale().y})`;
};
onMounted(() => {
  nextTick(() => {
    // 等到dom加载完毕后，添加样式
    screenRef.value.style.transform = `scale(${getScale().x}, ${getScale().y})`;
  });
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
</script>

<template>
  <div class="container" ref="screenRef">
    <!-- 标题  -->
    <ModuleTitle />
    <!-- 主体部分 -->
    <div class="main">
      <ModuleFirst />
      <ModuleSecond />
      <ModuleThird />
    </div>
  </div>
</template>

<style scoped>
.container {
  position: fixed;
  left: 0;
  top: 0;
  transform-origin: left top;
  width: 1920px;
  height: 1080px;
}
</style>
